<template>
    <div class="center-section-content">
        <div class="statistics-position-container" v-if="this.$route.path.indexOf('HabitatObservation') > 0">
            <div class="statistics-container">
                <div class="statistics-item">
                    <div class="label">科</div>
                    <div class="value fonts-DIN">{{ksz.k}}</div>
                </div>
                <div class="statistics-item">
                    <div class="label">属</div>
                    <div class="value fonts-DIN">{{ksz.s}}</div>
                </div>
                <div class="statistics-item">
                    <div class="label">种</div>
                    <div class="value fonts-DIN">{{ksz.z}}</div>
                </div>
            </div>
        </div>
        <div class="device-tabs">
            <div
                    v-for="device in deviceList"
                    :key="device.id"
                    :class="['device-tab', { active: activeDevice === device.id }]"
                    @click="handleDeviceClick(device.id,device.deviceData)"
            >
                <div class="tab-type">{{ device.type }}</div>
                <div>
                    <span>{{ device.name }}</span>
                    <span>{{device.total>0?'-':''}}</span>
                    <span class="fonts-DIN">{{ device.total>0?device.total:'' }}</span>
                </div>

            </div>
            <div
                    :class="['device-tab']"
                    @mouseenter="showDropdown = true"
                    @mouseleave="showDropdown = false"
            >
                <div class="tab-type">{{ "设备" }}</div>
                <div>
                    <span>监测设备</span>
                    <span>-</span>
                    <span class="fonts-DIN">4</span>
                </div>

                <!-- 下拉菜单 -->
                <transition name="slide-fade">
                    <div class="dropdown-menu" v-show="showDropdown">
                        <div
                                class="dropdown-item"
                                v-for="item in dropdownMenuItems"
                                :key="item.key"
                                @click="handleDeviceClick(item.id,item.deviceData)"
                        >
                            {{ item.name }}
                        </div>
                    </div>
                </transition>

            </div>
        </div>
    </div>
</template>

<script>
    import {EventBus} from "../../utils/event-bus";

    export default {
        name: 'Center',
        computed: {
            speciesSelect() {
                return this.$store.state.speciesSelect
                // 或者使用 getter
                // return this.$store.getters.getSharedVariable
            }
        },
        data() {
            return {
                showDropdown: false,
                ksz:{k:0,s:0,z:0},
                activeDevice: this.speciesSelect,
                deviceList: [
                    { id: 'huizong', name: '人工监测',total: 0, deviceData: '',type: '统计' },
                    { id: 'zidong', name: '自动监测',total: 0, deviceData: '',type: '统计' },
                    // { id: 'hongwai', name: '红外',total: 0, deviceData: '',type: '' },
                    // { id: 'shengwen', name: '声纹',total: 0, deviceData: '',type: '' },
                    // { id: 'shipin', name: '视频',total: 0, deviceData: '',type: '' },
                    // { id: 'chongqing', name: '昆虫',total: 0, deviceData: '',type: '' },
                    { id: 'wuhou', name: '物候',total: 0, deviceData: '',type: '观测' }
                ],
                dropdownMenuItems:[
                    { id: 'hongwai', name: '红外',total: 0, deviceData: '',type: '' },
                    { id: 'shengwen', name: '声纹',total: 0, deviceData: '',type: '' },
                    { id: 'shipin', name: '视频',total: 0, deviceData: '',type: '' },
                    { id: 'chongqing', name: '昆虫',total: 0, deviceData: '',type: '' }
                ],
                devices: [],
                total: 0
            }
        },
        created() {
        },
        mounted() {
            this.activeDevice = this.speciesSelect;
            this.$api.device.getDeviceList().then(res => {
                this.devices = res
                this.deviceList.forEach((device, index) => {
                    res.forEach(item => {
                        if (device.name === item.name) {
                            this.deviceList[index].total = item.status.normal + item.status.offline + item.status.error
                            this.deviceList[index].deviceData = item
                            this.deviceList[index].type = item.type
                        }else{

                        }
                    })
                });
                // this.handleDeviceClick(this.activeDevice,this.deviceList[0].deviceData);
            });
            this.getData();
        },
        methods: {
            handleDeviceClick(deviceId,deviceData) {
                this.activeDevice = deviceId;
                this.$store.commit('updateSpeciesSelect', deviceId);
                EventBus.$emit('set-markers', []);
                EventBus.$emit('sent-heat-map-data', []);
                if(deviceId === 'huizong'){
                    this.$router.push({
                        path: '/SpeciesAccount'
                    })
                }
                else if(deviceId === 'zidong'){
                    this.$router.push({
                        path: '/SpeciesStatisticsAuto'
                    })
                }else if(deviceId === 'wuhou'){
                    this.$router.push({
                        path: '/HabitatObservation'
                    })
                }else{
                    this.$router.push({
                        path: '/SpeciesObservation',
                        query:{deviceType:deviceId}
                    })
                    setTimeout(() => {
                        EventBus.$emit('menu-device-type', deviceId);
                    }, 500);
                }
            },
            addMapMarkers(device) {
                // 根据设备类型获取对应的标注数据
                let apiUrl = '';
                let deviceType = '';

                switch (device.name) {
                    case "红外":
                        apiUrl = "/cockpitapi/home/getHezeDeviceList";
                        deviceType = "hongwai";
                        break;
                    case "视频":
                        apiUrl = "/cockpitapi/home/getIcvideoDeviceList";
                        deviceType = "shipin";
                        break;
                    case "声纹":
                        apiUrl = "/cockpitapi/home/getSjkjDeviceList";
                        deviceType = "shengwen";
                        break;
                    case "昆虫":
                        apiUrl = "/cockpitapi/home/getWdtecDeviceList";
                        deviceType = "chongqing";
                        break;
                    case "物候":
                        apiUrl = "/cockpitapi/home/getWdtecDeviceList";
                        deviceType = "wuhou";
                        break;
                    case "物种汇总":
                        apiUrl = "/cockpitapi/home/getWdtecDeviceList";
                        deviceType = "species";
                        break;
                    default:
                        return;
                }
                EventBus.$emit('set-device-type', deviceType);
                // 调用API获取设备位置数据
                this.$api.device.getDeviceLocation(apiUrl).then(response => {
                    if (response) {
                        // 通过 Vuex 更新标注数据
                        this.$store.dispatch('map/updateMarkers', {
                            markers: response.map(item => ({
                                ...item,
                                icon: this.getMarkerIcon(deviceType, item.localStatus)
                            })),
                            deviceType: device.name
                        });
                    }
                }).catch(error => {
                    console.error('Error fetching device locations:', error);
                });
            },
            getMarkerIcon(deviceType, status) {
                const statusMap = {
                    1: 'normal',
                    2: 'offline',
                    3: 'abnormal'
                };
                const statusSuffix = statusMap[status] || 'normal';
                return require(`@/assets/img/${deviceType}-${statusSuffix}.png`);
            },
            getData(){
                this.$api.patrol.groupByType("family_chinese_name").then(res => {
                    if(res){
                        this.ksz.k=res.length;
                    }
                });
                this.$api.patrol.groupByType("genus_chinese_name").then(res => {
                    if(res){
                        this.ksz.s=res.length;
                    }
                });
                this.$api.patrol.groupByType("plant_name").then(res => {
                    if(res){
                        this.ksz.z=res.length;
                    }
                });
            }
        }
    }
</script>

<style lang="scss" scoped>
    .statistics-position-container{
        position: absolute;
        top: 64px;
        left:83px;
        z-index: 1000;
        pointer-events: auto;
        width: 79%;
    }
    .statistics-container {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .statistics-item {
            width: 90px;
            height: 65px;
            background: url('@/assets/img/species-statistics-bg.png') no-repeat center;
            background-size: 100% 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            color: #ccc;

            .value {
                font-size: 24px;
                font-weight: bold;
                color: #fff;
            }

            .label {
                font-size: 14px;
                margin-top: 4px;
            }
        }
    }

    .device-tabs {
        display: flex;
        gap: 10px;
        padding: 10px;
    }

    .device-tab {
        width: 134px;
        height: 60px;
        pointer-events: auto;
        color: #fff;
        cursor: pointer;
        font-size: 14px;
        text-align: center;
        background: url('@/assets/img/species-center-tab-normal-bg.png') no-repeat center;
        background-size: 100% 100%;
        transition: all 0.3s ease;
        user-select: none;
        position: relative;
        .tab-type{
            position: absolute;
            font-size:9px;
            left:15px;
            margin-top: 0;
            color:#ccc;
        }
        &.active {
            background-image: url('@/assets/img/species-center-tab-active-bg.png');
            color: #fff;
        }

        &:hover {
            color: #fff;
        }
        span{
            font-size: 18px;
            display: inline-block;
            margin-top: 10px;
        }
        div{
            font-size: 12px;
            margin-top: 13px;
        }
    }
</style>
